<template>
  <el-carousel :interval="4000" type="card" class="music-swiper" height="200px">
    <el-carousel-item v-for="(item,i) in Banners" :key="i">
      <el-image :src="item.imageUrl" class="swiper_img" width="500px"  @click="goImage(item.url)" fit="fill">
      </el-image>
    </el-carousel-item>
  </el-carousel>
</template>
<script>
import {mapState} from "vuex";

export default {
  name: "MusicSwiper",
  beforeCreate() {
    this.$store.dispatch('music/musicBanner')
  },
  computed:{
    ...mapState({Banners:state=>state.music.Banners})
  },
  methods:{
    goImage(url){
      url?window.open(url):''
    }
  }
}
</script>

<style lang="less">
.music-swiper{
  width: 100%;
  margin-top: 10px;
}
.swiper_img{
  width: 100%;
  height: 100%;
  .el-carousel__indicators--outside{
    position: absolute;
    left: 0;right: 0;
    bottom: 5px;
  }
}

</style>
